<template>
  <div class="app-container">
    <el-card>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        date-format="YYYY-MM-DD"
        time-format="hh:mm:ss"
        @change="timeChange"
      />
      <div class="seat-box" v-if="time.length > 0">
        <div class="seat-item" v-for="item in resourceList" :key="item.id">
          <div class="status" v-if="item.status == 0">
            <el-tag type="succrss">空闲</el-tag>
          </div>
          <div class="status" v-if="item.status == 1">
            <el-tag type="danger">占用</el-tag>
          </div>

          <div class="no">{{ item!.resourceName }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getResourceStatusdAPI, addResourceAPI } from "@/api/resource/index";
import { IResource } from "@/api/resource/types";

import { ref, reactive } from "vue";

const resourceList = ref<IResource[]>([]);
const getResourceList = async () => {
  if (time.value.length == 0) return;
  const res = await getResourceStatusdAPI({
    startTime: time.value[0],
    endTime: time.value[1],
  });
  resourceList.value = res.data;
};

const time = ref<string[]>([]);

const timeChange = () => {
  getResourceList();
};

onMounted(() => {
  time.value = [];
  getResourceList();
});
</script>

<style lang="scss" scoped>
.seat-box {
  width: 100%;
  flex-wrap: wrap;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;

  .seat-item {
    width: 110px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 5px #ccc;
    .status {
      height: 40px;
      line-height: 40px;
    }
    .no {
      height: 40px;
      line-height: 40px;
    }
    .status {
      height: 40px;
      line-height: 40px;
    }
    .no {
      height: 40px;
      line-height: 40px;
    }
  }
  .seat-item:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
}
</style>
